
.color-red {
	filter: sepia() hue-rotate(300deg) saturate(180%)
}
.color-blue {
	filter: sepia() hue-rotate(155deg) saturate(160%);
}
.color-green {
	filter: sepia() hue-rotate(50deg) saturate(160%);
}
.color-purple {
	filter: sepia() hue-rotate(200deg) saturate(160%);
}
.color-orange {
	filter: sepia() hue-rotate(330deg) saturate(160%);
}

@keyframes spin {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}

$indicator-color: #666;
$indicator-size: 1em;
$indicator-thickness: 0.2em;
.loading-indicator {
	&, &:after {
		border-radius: 50%;
		width: $indicator-size;
		height: $indicator-size;
	}
	animation: spin 1.1s infinite linear;
	border: $indicator-thickness solid transparent;
	border-top-color: $indicator-color;
	line-height: 1;
	margin: 0 auto;
	position: relative;
	text-indent: -9999em;
	transform: translateZ(0);
	&:after {
		position: absolute;
		top: (- $indicator-thickness);
		left: (- $indicator-thickness);
		border: $indicator-thickness solid transparentize($indicator-color, 0.8);
		content: ' ';
	}
}

.page-load {
  font-size: 2rem;
}

.text-number {
	font-variant-numeric: lining-nums tabular-nums;
}

.btn.loading {
  background-color: #ddd;
  border-color: #bbb;
  color: #666;
  cursor: wait;
  overflow: hidden;
  position: relative;
  text-shadow:0 2px 2px #fff;
}

